<template>
	<view class="container">
		<view class="top">
			<image class="person-img" src="@/static/hospital.png"></image>
		</view>
		<text class="username">用户名：{{username}}</text>
		<view class="line"></view>
		<view class="text-area">
			<!-- <button class="questionBtn" @click="question">问题咨询</button>
			
			<view class="out">
				<button class="outbtn" @click="toLogin">退出</button>
			</view> -->
			<view class="functionBtn">
				<image class="btnImg" src="../../static/question.png" @click="question"></image>
				<text>问题咨询</text>
			</view>
			<view class="functionBtn">
				<image class="btnImg" src="../../static/exit.png" @click="toLogin"></image>
				<text>退出</text>
				<!-- <button class="registrationBtn" @click="registrationRecord">挂号记录</button> -->
				<!-- <view class="line"></view> -->
				<!-- <button class="btn" @click="medicalRecord">体检记录</button> -->
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: ''
			}
		},
		onLoad() {
			this.username = uni.getStorageSync('user').username
			this.getList()
		},
		methods: {
			
			// 问题咨询
			question() {
				uni.navigateTo({
					url: '/pages/question/index'
				})
			},
			// 退出
			toLogin() {
				uni.showModal({
				    title: '提示',
				    content: '是否确定退出',
				    success: function (res) {
				        if (res.confirm) {
				            // uni.removeStorageSync('user');
										uni.clearStorageSync()
										// uni.clearStorage()
				            uni.navigateTo({
				            	url: '/pages/login/index'
				            })
				        }
				    }
				});
				// uni.removeStorageSync('user');
				// uni.navigateTo({
				// 	url: '/pages/login/index'
				// })
			}
		}
	}
</script>

<style>
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 0;
		box-sizing: border-box;
		/* background: linear-gradient(top, #4a8d9c, #705271); */
	}
	.top {
		padding-top: 40rpx;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.person-img {
		height: 150rpx;
		width: 150rpx;
	}
	.username {
		
		width: auto;
		margin-top: 50rpx;
		text-align: center;
		}
	.line {
		margin-top: 60rpx;
		margin-bottom: 50rpx;
		height: 5rpx;
		width: 100%;
		background-color: #4a8d9c;
	}
	.text-area {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content:space-around;
		align-items: center;
	}
	.functionBtn {
		background-color: #f2f3f5;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 20rpx;
	}
	.btnImg {
		width: 80rpx;
		height: 80rpx;
	}
	.functionBtn text {
		font-size: large;
		color: #545454;
		margin-top: 15rpx;
		
	}
	
	.questionBtn{
		margin-top: 50rpx;
	}
	.outbtn{
		margin-top: 50rpx;
	}
</style>
